Component({
  properties: {
    show: {
      type: Boolean,
      value: false
    },
    selected: {
      type: Number,
      value: null
    }
  },

  data: {
    optionList:[
      { 
        name: '表白',
        url: '/pages/add/wall'
      },
      {
        name: '树洞',
        url: '/pages/add/hole'
      }
    ],
    optionValue: null,
    hideFlag: true,//true-隐藏  false-显示
    animationData: {},//动画

    "list": [
      {
        "selectedIconPath": "/images/tabBar/home_selected.png",
        "iconPath": "/images/tabBar/home.png",
        "pagePath": "/pages/home/home",
        "text": "首页"
      },
      {
        "selectedIconPath": "/images/tabBar/follow_selected.png",
        "iconPath": "/images/tabBar/follow.png",
        "pagePath": "/pages/follow/follow",
        "text": "关注"
      },
      {
        "selectedIconPath": "/images/tabBar/user_selected.png",
        "iconPath": "/images/tabBar/user.png",
        "pagePath": "/pages/me/me",
        "text": "我"
      },
      {
        "selectedIconPath": "/images/tabBar/add_selected.png",
        "iconPath": "/images/tabBar/add.png",
        "pagePath": "",
        "text": "添加"
      }
    ]
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      // 如果是点发表
      if(data.index == 3){
        this.showModal()
      }else{
        wx.switchTab({url})
      }
    },
      // 点击选项
    getOption:function(e){
      console.log(e.currentTarget.dataset);
      var that = this;
      that.setData({
        optionValue:e.currentTarget.dataset.value,
        hideFlag: true
      })
      wx.navigateTo({
        url: e.currentTarget.dataset.value.url,
      })
  },
  //取消
  mCancel: function () {
    var that = this;
    that.hideModal();
  },
 
  // ----------------------------------------------------------------------modal
  // 显示遮罩层
  showModal: function () {
    var that = this;
    that.setData({
      hideFlag: false
    })
    // 创建动画实例
    var animation = wx.createAnimation({
      duration: 400,//动画的持续时间
      timingFunction: 'ease',//动画的效果 默认值是linear->匀速，ease->动画以低速开始，然后加快，在结束前变慢
    })
    this.animation = animation; //将animation变量赋值给当前动画
    var time1 = setTimeout(function () {
      that.slideIn();//调用动画--滑入
      clearTimeout(time1);
      time1 = null;
    }, 100)
  },
 
  // 隐藏遮罩层
  hideModal: function () {
    var that = this;
    var animation = wx.createAnimation({
      duration: 400,//动画的持续时间 默认400ms
      timingFunction: 'ease',//动画的效果 默认值是linear
    })
    this.animation = animation
    that.slideDown();//调用动画--滑出
    var time1 = setTimeout(function () {
      that.setData({
        hideFlag: true
      })
      clearTimeout(time1);
      time1 = null;
    }, 220)//先执行下滑动画，再隐藏模块
    
  },
  //动画 -- 滑入
  slideIn: function () {
    this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画
    this.setData({
      //动画实例的export方法导出动画数据传递给组件的animation属性
      animationData: this.animation.export()
    })
  },
  //动画 -- 滑出
  slideDown: function () {
    this.animation.translateY(300).step()
    this.setData({
      animationData: this.animation.export(),
    })
  }
  }
})